<template>
    <div>
        <div class="list-common-table">
            <t-form ref="form" :data="formData" :label-width="80" colon @reset="onReset" @submit="onSubmit">
                <t-row>
                    <t-col :span="10">
                        <t-row :gutter="[24, 24]">
                            <t-col :span="4">
                                <t-form-item label="路由地址" name="path">
                                    <t-input
                                        v-model="formData.path"
                                        class="form-item-content"
                                        placeholder="请输入路由地址"
                                        :style="{ minWidth: '134px' }"
                                    />
                                </t-form-item>
                            </t-col>
                            <t-col :span="4">
                                <t-form-item label="菜单状态" name="status">
                                    <t-select
                                        v-model="formData.status"
                                        class="form-item-content"
                                        :options="CONTRACT_STATUS_OPTIONS"
                                        placeholder="请选择菜单状态"
                                    />
                                </t-form-item>
                            </t-col>
                            <t-col :span="4">
                                <t-form-item label="路由名称" name="name">
                                    <t-input
                                        v-model="formData.name"
                                        class="form-item-content"
                                        type="search"
                                        placeholder="请输入路由名称"
                                        :style="{ minWidth: '134px' }"
                                    />
                                </t-form-item>
                            </t-col>
                            <t-col :span="4">
                                <t-form-item label="组件路径" name="component">
                                    <t-input
                                        v-model="formData.component"
                                        class="form-item-content"
                                        type="search"
                                        placeholder="请输入组件路径"
                                        :style="{ minWidth: '134px' }"
                                    />
                                </t-form-item>
                            </t-col>
                            <t-col :span="4">
                                <t-form-item label="中文标题" name="titleZhCn">
                                    <t-input
                                        v-model="formData.titleZhCn"
                                        class="form-item-content"
                                        type="search"
                                        placeholder="中文标题"
                                        :style="{ minWidth: '134px' }"
                                    />
                                </t-form-item>
                            </t-col>
                            <t-col :span="4">
                                <t-form-item label="英文标题" name="titleEnUs">
                                    <t-input
                                        v-model="formData.titleEnUs"
                                        class="form-item-content"
                                        type="search"
                                        placeholder="英文标题"
                                        :style="{ minWidth: '134px' }"
                                    />
                                </t-form-item>
                            </t-col>
                        </t-row>
                    </t-col>

                    <t-col :span="2" class="operation-container">
                        <t-button
                            theme="primary"
                            type="submit"
                            :style="{ marginLeft: 'var(--td-comp-margin-s)' }"
                            @click="fetchData"
                        >
                            {{ t('components.commonTable.query') }}
                        </t-button>
                        <t-button type="reset" variant="base" theme="default">
                            {{ t('components.commonTable.reset') }}
                        </t-button>
                    </t-col>

                    <div class="left-operation-container" style="margin-top: 25px">
                        <t-button @click="createUser">创建菜单</t-button>
                        <!--                    <t-button variant="base" theme="default"> 导出菜单</t-button>-->
                        <t-button @click="allDelete">批量删除</t-button>
                    </div>
                </t-row>
            </t-form>

            <t-row justify="space-between"></t-row>

            <div class="table-container">
                <t-enhanced-table
                    row-key="menuId"
                    :data="data"
                    :columns="COLUMNS"
                    :hover="hover"
                    :tree="treeConfig"
                    :select-row-keys="selectedRowKeys"
                    @select-change="rehandleSelectChange"
                    @page-change="rehandlePageChange"
                    @change="rehandleChange"
                >
                    <template #status="{ row }">
                        <t-tag v-if="row.status == 0" theme="success" variant="light">
                            {{ t('components.commonTable.contractStatusEnum.fail') }}
                        </t-tag>
                        <t-tag v-if="row.status == 1" theme="danger" variant="light">
                            {{ t('components.commonTable.contractStatusEnum.audit') }}
                        </t-tag>
                    </template>
                    <template #op="slotProps">
                        <t-space>
                            <t-link theme="primary" @click="handleClickDetail(slotProps)">修改</t-link>
                            <t-link theme="danger" @click="handleClickDelete(slotProps)">删除</t-link>
                        </t-space>
                    </template>
                </t-enhanced-table>
                <t-dialog
                    v-model:visible="confirmVisible"
                    header="确认删除当前所选菜单？"
                    :body="confirmBody"
                    :on-cancel="onCancelDelete"
                    @confirm="onConfirmDelete"
                />
            </div>
        </div>

        <!-- 创建菜单弹出框 -->
        <t-dialog
            v-model:visible="createDialogVisible"
            width="55%"
            header="创建新菜单"
            placement="center"
            :on-cancel="onCancelCreate"
            @confirm="onConfirmCreate"
        >
            <t-form ref="createForm" :data="newMenuFormData" :label-width="80" colon>
                <t-row :gutter="[0, 12]">
                    <t-col :span="5">
                        <t-form-item label="菜单类型" name="menuType">
                            <t-select
                                v-model="newMenuFormData.menuType"
                                :options="MENU_STATUS_OPTIONS"
                                placeholder="请选择菜单类型menuType"
                                @change="selectParent"
                            />
                        </t-form-item>
                        <t-form-item v-if="newMenuFormData.menuType === 'C'" label="父亲级菜单" name="status">
                            <t-select
                                v-model="newMenuFormData.parentId"
                                :options="parentList"
                                placeholder="请选择父亲级菜单"
                            />
                        </t-form-item>
                        <t-form-item label="菜单名称" name="titleZhCn">
                            <t-input v-model="newMenuFormData.titleZhCn" placeholder="请输入菜单名称titleZhCn" />
                        </t-form-item>
                        <t-form-item label="路由名称" name="name">
                            <t-input v-model="newMenuFormData.name" placeholder="请输入路由名称name" />
                        </t-form-item>
                        <t-form-item label="是否外链" name="isFrame">
                            <t-radio-group
                                v-model="newMenuFormData.isFrame"
                                :options="YES_OR_NO_STATUS_OPTIONS"
                                placeholder="是否外链"
                            />
                        </t-form-item>
                        <t-form-item label="外链地址" v-if="newMenuFormData.isFrame == 0" name="redirect">
                            <t-input v-model="newMenuFormData.frameSrc" placeholder="请输入外链地址frameSrc" />
                        </t-form-item>
                        <t-form-item label="重定向地址" v-if="newMenuFormData.menuType == 'M'" name="redirect">
                            <t-input v-model="newMenuFormData.redirect" placeholder="请输入重定向地址redirect" />
                        </t-form-item>
                        <t-form-item label="排序" name="orderNum">
                            <t-input-number
                                v-model="newMenuFormData.orderNum"
                                theme="column"
                                style="width: 100%"
                                placeholder="请输入排序"
                            />
                        </t-form-item>
                    </t-col>
                    <t-col :span="1"></t-col>
                    <t-col :span="5">
                        <t-form-item label="图标" name="icon">
                            <t-select
                                v-model="newMenuFormData.icon"
                                placeholder="请选择图标"
                                :popup-props="{ overlayInnerStyle: { width: '330px' } }"
                            >
                                <t-option
                                    v-for="item in options"
                                    :key="item.stem"
                                    :value="item.stem"
                                    style="display: inline-block; font-size: 20px"
                                >
                                    <div>
                                        <t-icon :name="item.stem" />
                                    </div>
                                </t-option>
                                <template #valueDisplay>
                                    <t-icon :name="newMenuFormData.icon" :style="{ marginRight: '8px' }" />
                                    {{ newMenuFormData.icon }}
                                </template>
                            </t-select>
                        </t-form-item>
                        <t-form-item label="国际化名称" name="titleEnUs">
                            <t-input v-model="newMenuFormData.titleEnUs" placeholder="请输入国际化名称titleEnUs" />
                        </t-form-item>
                        <t-form-item label="权限标识" name="perms">
                            <t-input v-model="newMenuFormData.perms" placeholder="请输入权限标识perms" />
                        </t-form-item>
                        <t-form-item label="路由地址" name="path">
                            <t-input v-model="newMenuFormData.path" placeholder="请输入路由地址path" />
                        </t-form-item>
                        <t-form-item label="组件路径" name="component">
                            <t-input v-model="newMenuFormData.component" placeholder="请输入组件路径component" />
                        </t-form-item>
                    </t-col>
                </t-row>
            </t-form>
        </t-dialog>

        <!-- 修改菜单弹出框 -->
        <t-dialog
            v-model:visible="updateDialogVisible"
            width="55%"
            header="修改新菜单"
            placement="center"
            :on-cancel="onCancelUpdate"
            @confirm="onConfirmUpdate"
        >
            <t-form ref="createForm" :data="updateMenuFormData" :label-width="80" colon>
                <t-row :gutter="[0, 12]">
                    <t-col :span="5">
                        <t-form-item label="菜单类型" name="status">
                            <t-select
                                v-model="updateMenuFormData.menuType"
                                :options="MENU_STATUS_OPTIONS"
                                placeholder="请选择账户状态"
                                @change="selectParent"
                            />
                        </t-form-item>
                        <t-form-item v-if="updateMenuFormData.menuType === 'C'" label="父亲级菜单" name="status">
                            <t-select
                                v-model="updateMenuFormData.parentId"
                                :options="parentList"
                                placeholder="请选择父亲级菜单"
                            >
                            </t-select>
                        </t-form-item>
                        <t-form-item label="菜单名称" name="titleZhCn">
                            <t-input v-model="updateMenuFormData.titleZhCn" placeholder="请输入菜单名称" />
                        </t-form-item>
                        <t-form-item label="路由名称" name="name">
                            <t-input v-model="updateMenuFormData.name" placeholder="请输入路由名称" />
                        </t-form-item>
                        <t-form-item label="是否外链" name="isFrame">
                            <t-radio-group
                                v-model="updateMenuFormData.isFrame"
                                :options="YES_OR_NO_STATUS_OPTIONS"
                                placeholder="请选择父亲级菜单"
                            />
                        </t-form-item>
                        <t-form-item label="外链地址" v-if="updateMenuFormData.isFrame == 0" name="redirect">
                            <t-input v-model="updateMenuFormData.frameSrc" placeholder="请输入外链地址frameSrc" />
                        </t-form-item>
                        <t-form-item label="重定向地址" v-if="updateMenuFormData.menuType == 'M'" name="redirect">
                            <t-input v-model="updateMenuFormData.redirect" placeholder="请输入重定向地址redirect" />
                        </t-form-item>
                        <t-form-item label="排序" name="orderNum">
                            <t-input-number
                                v-model="updateMenuFormData.orderNum"
                                theme="column"
                                style="width: 100%"
                                placeholder="请输入排序"
                            />
                        </t-form-item>
                    </t-col>
                    <t-col :span="1"></t-col>
                    <t-col :span="5">
                        <t-form-item label="图标" name="icon">
                            <t-select
                                v-model="updateMenuFormData.icon"
                                placeholder="请选择图标"
                                :popup-props="{ overlayInnerStyle: { width: '330px' } }"
                            >
                                <t-option
                                    v-for="item in options"
                                    :key="item.stem"
                                    :value="item.stem"
                                    style="display: inline-block; font-size: 20px"
                                >
                                    <div>
                                        <t-icon :name="item.stem" />
                                    </div>
                                </t-option>
                                <template #valueDisplay>
                                    <t-icon :name="updateMenuFormData.icon" :style="{ marginRight: '8px' }" />
                                    {{ newMenuFormData.icon }}
                                </template>
                            </t-select>
                        </t-form-item>
                        <t-form-item label="国际化名称" name="titleEnUs">
                            <t-input v-model="updateMenuFormData.titleEnUs" placeholder="请输入国际化名称" />
                        </t-form-item>
                        <t-form-item label="权限标识" name="titleEnUs">
                            <t-input v-model="updateMenuFormData.perms" placeholder="请输入权限标识" />
                        </t-form-item>
                        <t-form-item label="路由地址" name="path">
                            <t-input v-model="updateMenuFormData.path" placeholder="请输入路由地址" />
                        </t-form-item>
                        <t-form-item label="组件路径" name="component">
                            <t-input v-model="updateMenuFormData.component" placeholder="请输入组件路径" />
                        </t-form-item>
                        <t-form-item label="菜单状态" name="status">
                            <t-radio-group
                                v-model="updateMenuFormData.status"
                                :options="CONTRACT_STATUS_OPTIONS"
                                placeholder="请选择菜单状态"
                            />
                        </t-form-item>
                    </t-col>
                </t-row>
            </t-form>
        </t-dialog>
    </div>
</template>

<script setup lang="ts">
import { manifest } from 'tdesign-icons-vue-next';
import { Icon, MessagePlugin, PageInfo, PrimaryTableCol, TableRowData } from 'tdesign-vue-next';
import { computed, onMounted, reactive, ref, watch } from 'vue';

import { addMenu, deleteMenuById, getAllLevel, getMenuById, getMenuList, updateMenu } from '@/api/menu';
import { addUser, blockedAndUnseal, deleteUserById, getAdminUserList, getUserById, updateUserById } from '@/api/user';
import { prefix } from '@/config/global';
import { t } from '@/locales';
import { useSettingStore, useUserStore } from '@/store';
// 获取全部图标的列表
const options = ref(manifest);
const store = useSettingStore();

const CONTRACT_STATUS_OPTIONS = [
    { value: '0', label: '正常' },
    { value: '1', label: '停用' },
];
const MENU_STATUS_OPTIONS = [
    { value: 'M', label: '目录' },
    { value: 'C', label: '菜单' },
    { value: 'F', label: '按钮' },
];
const YES_OR_NO_STATUS_OPTIONS = [
    { value: 0, label: '是' },
    { value: 1, label: '否' },
];
const sexs = [
    { value: 0, label: '男' },
    { value: 1, label: '女' },
];
const COLUMNS: PrimaryTableCol[] = [
    {
        colKey: 'row-select',
        type: 'multiple',
        // 禁用行选中方式一：使用 disabled 禁用行（示例代码有效，勿删）。disabled 参数：{row: RowData; rowIndex: number })
        // 这种方式禁用行选中，当前行会添加行类名 t-table__row--disabled，禁用行文字变灰
        // disabled: ({ rowIndex }) => rowIndex === 1 || rowIndex === 3,

        // 禁用行选中方式二：使用 checkProps 禁用行（示例代码有效，勿删）
        // 这种方式禁用行选中，行文本不会变灰
        // checkProps: ({ row }) => ({ disabled: !row.childrenList && row.status !== 0 }),
        // 自由调整宽度，如果发现元素看不见，请加大宽度
        width: 50,
    },
    {
        title: '菜单名称',
        ellipsis: true,
        width: 170,
        align: 'left', // 可以根据需要调整对齐方式
        colKey: 'titleZhCn',
    },
    {
        title: '菜单图标',
        fixed: 'left',
        ellipsis: true,
        width: 100,
        align: 'center', // 可以根据需要调整对齐方式
        colKey: 'icon',
        cell: (h, { row }) => h(Icon, { name: row.icon }),
    },
    {
        title: '路由名称',
        fixed: 'left',
        ellipsis: true,
        width: 150,
        align: 'center',
        colKey: 'name',
    },
    {
        title: '组件路径',
        width: 200,
        ellipsis: true,
        align: 'center',
        colKey: 'component',
    },
    {
        title: '状态',
        ellipsis: true,
        width: 100,
        align: 'center',
        colKey: 'status',
    },
    {
        title: '权限标识',
        ellipsis: true,
        width: 100,
        align: 'center',
        colKey: 'perms',
    },
    {
        title: '是否为外链',
        ellipsis: true,
        width: 100,
        align: 'center',
        colKey: 'isFrame',
        cell: (h, { row }) => {
            const filter = YES_OR_NO_STATUS_OPTIONS.find((item) => item.value === row.isFrame);
            return filter ? filter.label : '';
        },
    },
    {
        title: '菜单类型',
        ellipsis: true,
        width: 100,
        align: 'center',
        colKey: 'menuType',
        cell: (h, { row }) => {
            const filter = MENU_STATUS_OPTIONS.find((item) => item.value === row.menuType);
            return filter ? filter.label : '';
        },
    },
    {
        align: 'center',
        fixed: 'right',
        width: 160,
        colKey: 'op',
        title: '操作',
    },
];
// 树形结构配置
const treeConfig = reactive({
    childrenKey: 'children',
    treeNodeColumnIndex: 0,
    indent: 35,
    expandTreeNodeOnClick: true,
    defaultExpandAll: true,
});
const searchForm = {
    path: '',
    name: '',
    component: '',
    titleZhCn: '',
    titleEnUs: '',
    status: '',
    pageNum: 1,
    pageSize: 1000,
};

const formData = ref({ ...searchForm });

const rowKey = 'index';
const hover = true;

/**
 * 存储表格数据
 */
const data = ref([]);

const dataLoading = ref(false);

// 初始化
onMounted(() => {
    fetchData();
});
/**
 * 搜索
 */
const fetchData = async () => {
    dataLoading.value = true;
    try {
        const response = await getMenuList(formData.value);
        console.log('response', response);
        const { records, total } = response;
        console.log('records', records);
        data.value = records;
        pagination.value = {
            ...pagination.value,
            total,
        };
    } catch (e) {
        console.log(e);
    } finally {
        dataLoading.value = false;
    }
};
/**
 * 分页
 * @param pageInfo
 * @param newDataSource
 */
const rehandlePageChange = (pageInfo: PageInfo, newDataSource: TableRowData[]) => {
    console.log('分页查询', pageInfo, newDataSource);
    formData.value.pageNum = pageInfo.current;
    formData.value.pageSize = pageInfo.pageSize;
    fetchData();
};
/**
 * 分页配置
 */
const pagination = ref({
    defaultPageSize: 5,
    total: 10,
    defaultCurrent: 1,
});
// 创建菜单
const createUser = () => {
    createDialogVisible.value = true;
};
// 弹出框显示状态
let createDialogVisible = ref(false);

// 新建菜单的表单数据
const newMenuFormData = ref({
    path: '',
    name: '',
    parentId: 0,
    orderNum: 0,
    component: '',
    redirect: '',
    query: '',
    titleZhCn: '',
    titleEnUs: '',
    perms: '',
    icon: '',
    isFrame: 0,
    frameSrc: '',
    isCache: 0,
    menuType: '',
});
// 取消创建菜单
const onCancelCreate = () => {
    createDialogVisible.value = false;
    // 清空表单数据
    newMenuFormData.value = {
        component: '',
        icon: '',
        isCache: 0,
        isFrame: 0,
        frameSrc: '',
        menuType: '',
        name: '',
        orderNum: 0,
        parentId: 0,
        path: '',
        perms: '',
        query: '',
        redirect: '',
        titleEnUs: '',
        titleZhCn: '',
    };
};

// 确认创建菜单
const onConfirmCreate = async () => {
    try {
        await addMenu(newMenuFormData.value);
        // 重新获取数据
        fetchData();
        createDialogVisible.value = false;
        MessagePlugin.success('菜单创建成功');
    } catch (error) {
        console.error('创建菜单失败:', error);
        MessagePlugin.error('创建菜单失败');
    } finally {
        // 清空表单数据
        onCancelCreate();
    }
};

// 修改

const handleClickDetail = (slot: any) => {
    console.log('slot', slot);
    updateUser(slot.row.menuId);
};

// 修改菜单
const updateUser = async (id: any) => {
    try {
        // 根据id查询修改菜单的信息
        const response = await getMenuById(id);
        console.log('response', response);
        updateMenuFormData.value = response;
        console.log('updateUserFormData', updateMenuFormData.value);
        await selectAllLevel();
        updateDialogVisible.value = true;
    } catch (error) {
        console.error('获取菜单信息失败:', error);
        MessagePlugin.error('获取菜单信息失败');
    }
};
// 弹出框显示状态修改
const updateDialogVisible = ref(false);

// 修改菜单的表单数据
const updateMenuFormData = ref({
    path: '',
    name: '',
    parentId: 0,
    orderNum: 0,
    component: '',
    redirect: '',
    query: '',
    titleZhCn: '',
    titleEnUs: '',
    perms: '',
    icon: '',
    isFrame: 0,
    frameSrc: '',
    isCache: 0,
    menuType: '',
    visible: 0,
    status: 0,
});
// 取消修改菜单
const onCancelUpdate = () => {
    updateDialogVisible.value = false;
    // 清空表单数据
    updateMenuFormData.value = {
        component: '',
        icon: '',
        isCache: 0,
        isFrame: 0,
        menuType: '',
        name: '',
        orderNum: 0,
        parentId: 0,
        path: '',
        perms: '',
        query: '',
        redirect: '',
        status: 0,
        titleEnUs: '',
        titleZhCn: '',
        visible: 0,
    };
    // 清空图片上传列表
    resetUpload();
};

// 确认修改菜单
const onConfirmUpdate = async () => {
    try {
        await updateMenu(updateMenuFormData.value);
        // 重新获取数据
        fetchData();
        createDialogVisible.value = false;
        MessagePlugin.success('菜单修改成功');
    } catch (error) {
        console.error('修改菜单失败:', error);
        MessagePlugin.error('修改菜单失败');
    } finally {
        // 清空表单数据
        onCancelCreate();
        updateDialogVisible.value = false;
        resetUpload();
    }
};
// 拉取父级菜单
const parentList = ref([]);
const selectParent = async (value) => {
    console.log('value', value);
    if (value === 'C') {
        await selectAllLevel();
    }
};
const selectAllLevel = async () => {
    const response = await getAllLevel();
    console.log('response', response);
    parentList.value = response;
};
// 删除
const confirmVisible = ref(false);
// 删除菜单在表格中的索引
const deleteIdx = ref(-1);
const handleClickDelete = (slot: any) => {
    console.log('slot', slot.rowIndex);
    deleteIdx.value = slot.rowIndex;
    confirmVisible.value = true;
};

const confirmBody = computed(() => {
    if (deleteIdx.value > -1) {
        console.log('data.value', data.value[deleteIdx.value]);
        const { titleZhCn } = data.value[deleteIdx.value];
        return `删除后，${titleZhCn}的所有菜单信息将被清空，且无法恢复`;
    }
    return '';
});

const onConfirmDelete = async () => {
    // 真实业务请发起请求
    // 主义需要加await 等待删除请求完成后在请求查询 不然可能没有删除成功就请求了
    if (deleteIdx.value !== -1) {
        await deleteMenuById(data.value[deleteIdx.value].menuId);
        // 恢复删除索引
        resetIdx();
    } else {
        await deleteMenuById(selectedRowKeys.value);
        selectedRowKeys.value = [];
    }

    // 重新获取数据
    fetchData();
    confirmVisible.value = false;
    MessagePlugin.success('删除成功');
};
// 取消删除
const onCancelDelete = () => {
    resetIdx();
};
const resetIdx = () => {
    deleteIdx.value = -1;
};
// 选择的选中行的key
const selectedRowKeys = ref([]);
const rehandleSelectChange = (value, { selectedRowData }) => {
    selectedRowKeys.value = value;
    console.log(value, selectedRowData);
};
// 批量删除
const allDelete = async () => {
    console.log('selectedRowKeys', selectedRowKeys.value);
    if (selectedRowKeys.value.length === 0) {
        MessagePlugin.error('请选择要删除的菜单');
        return;
    }
    confirmVisible.value = true;
};

// 复位
const onReset = (val: unknown) => {
    console.log(val);
};

// 提交
const onSubmit = (val: unknown) => {
    console.log(val);
    console.log(formData.value);
};

const rehandleChange = (changeParams: unknown, triggerAndData: unknown) => {
    console.log('统一Change', changeParams, triggerAndData);
};

const headerAffixedTop = computed(
    () =>
        ({
            offsetTop: store.isUseTabsRouter ? 48 : 0,
            container: `.${prefix}-layout`,
        }) as any, // TO BE FIXED
);
// 账户封禁解封
const handleClickFen = async (slot: any) => {
    console.log('slot', slot.rowIndex);
    await blockedAndUnseal(slot.row.menuId);
    fetchData();
};
const userStore = useUserStore();
const { token } = userStore;
console.log('token', token);
// 图片上传
const upload = reactive({
    actionUrl: `http://localhost:8081/api/common/file/upload`,
    headers: {
        Authorization: token,
    },
});

const multiple = ref(false);
const uploadRef = ref(null);

const handleFail = (context: any) => {
    console.log('Upload failed:', context);
};
// // 文件上传完成
// const handleSuccess = (context: any) => {
//     console.log('Upload success Url:', context.response.data);
//     updateUserFormData.value.avatar = context.response.data;
// };

const onOneFileSuccess = (context: any) => {
    console.log('One file upload success:', context);
};

const deleteImg = (context: any) => {
    console.log('Delete image:', context);
};

const resetUpload = () => {};

// 创建文件上传完成
// const handleCreateSuccess = (context: any) => {
//     console.log('Create success Url:', context.response.data);
//     newUserFormData.value.avatar = context.response.data;
// };
</script>

<style lang="less" scoped>
.list-common-table {
    background-color: var(--td-bg-color-container);
    padding: var(--td-comp-paddingTB-xxl) var(--td-comp-paddingLR-xxl);
    border-radius: var(--td-radius-medium);

    .table-container {
        margin-top: var(--td-comp-margin-xxl);
    }
}

.form-item-content {
    width: 100%;
}

.operation-container {
    display: flex;
    justify-content: flex-end;
    align-items: center;

    .expand {
        .t-button__text {
            display: flex;
            align-items: center;
        }
    }
}

.payment-col {
    display: flex;

    .trend-container {
        display: flex;
        align-items: center;
        margin-left: var(--td-comp-margin-s);
    }
}

.tdesign-demo-image-viewer__ui-image {
    width: 100%;
    height: 100%;
    display: inline-flex;
    position: relative;
    justify-content: center;
    align-items: center;
    border-radius: var(--td-radius-small);
    overflow: hidden;
}

.tdesign-demo-image-viewer__ui-image--hover {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    background-color: rgba(0, 0, 0, 0.6);
    color: var(--td-text-color-anti);
    line-height: 22px;
    transition: 0.2s;
}

.tdesign-demo-image-viewer__ui-image:hover .tdesign-demo-image-viewer__ui-image--hover {
    opacity: 1;
    cursor: pointer;
}

.tdesign-demo-image-viewer__ui-image--img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    cursor: pointer;
    position: absolute;
}

.tdesign-demo-image-viewer__ui-image--footer {
    padding: 0 16px;
    height: 56px;
    width: 100%;
    line-height: 56px;
    font-size: 16px;
    position: absolute;
    bottom: 0;
    color: var(--td-text-color-anti);
    background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 100%);
    display: flex;
    box-sizing: border-box;
}

.tdesign-demo-image-viewer__ui-image--title {
    flex: 1;
}

.tdesign-demo-popup__reference {
    margin-left: 16px;
}

.tdesign-demo-image-viewer__ui-image--icons .tdesign-demo-icon {
    cursor: pointer;
}

.tdesign-demo-image-viewer__base {
    width: 35px;
    height: 35px;
    margin: 0px auto;
    //border: 4px solid var(--td-bg-color-secondarycontainer);
    border-radius: var(--td-radius-medium);
}

.avatar-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px; /* 调整图片和上传组件之间的间距 */
}

.avatar-preview img {
    width: 100px;
    height: 100px;
    object-fit: cover; /* 确保图片覆盖整个区域 */
}

.overlay-options {
    display: inline-block;
    font-size: 20px;
}
</style>
